<template>
	<view class="qk_index_body">
		<view class="qk_index_hd">
			<image class="qk_index_banner_bg" src="/static/image/index_bg.png" mode="widthFix"/>
			<view class="qk_index_hd_title">旗开线上售楼处</view>
			<view class="qk_index_solgen">为您提供专属的购房体验</view>
			
			<view class="qk_index_searchBar">
				<view class="qk_index_city" bindtap="chooseCity">
				    <view class="qk_index_currcity">{{currCity}}</view>
				</view>
				<view class="qk_index_searchInputBox">
					<uni-icons type="search" size="10"></uni-icons>
					<input placeholder="搜索楼盘"/>
				</view>
			</view>
			<view class="qk_index_banner_box">
				<swiper class="qk_index_banner swiper-box"
					indicator-dots="true"
					autoplay="true"
					interval="3000"
					indicator-color="#e5e5e5"
					indicator-active-color="#1759f9"
				>
					<block v-for="item in indexImgList">
						<swiper-item>
							<view class="qk_index_banner_item">
								<image :src="item"></image>
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>
		<view class="qk_index_buildHd">推荐楼盘</view>
	    <view class="qk_index_buildlist">
	        <block v-for="item in index_lp_item">
	            <view class="qk_index_builditem" bindtap="lpClickFunc">
	                <image class="qk_index_builditem_mainimg" :src="item.img"/>
	                <view class="qk_index_builditem_title">{{item.title}}
	                    <image v-if="item.isActive" src="/static/image/index_ac.png" />
	                    <view class="qk_index_builditem_title_city"><text class="iconfont icon-location"></text>{{item.city}}</view>
	                </view>
	                <view class="qk_index_builditem_address">{{item.address}}</view>
					<view class="qk_index_builditem_tips">
					    <text v-for="tips in item.tips" v-for-item="tips">{{tips}}</text>
	                </view>
	                <view class="qk_index_builditem_price">均价<text class="qk_index_num">{{item.price}}</text>元 / m<text class="qk_index_pow">2</text></view>
	            </view>
	        </block>
	    </view>
		<view class="qk_index_footer">
			<image src="../../static/image/bottomLogo.png" mode="aspectFit"></image>
		</view>
		<view class="common_tabbar_border"></view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		components: {uniIcons},
		data() {
			return {
				currCity:"福州市",
				index_lp_item:[
				  {
					title:"福州璀璨天宸",
					img:"/static/image/index_1.png",
					isActive:true,
					price:"10000",
					address:"福州市城关区青石白街道银河国际居住区",
					city:"福州",
					tips:["南北通透","明厨明卫","带飘窗"]
				  }
				],
				indexImgList:["/static/image/index_banner.png","/static/image/index_banner.png","/static/image/index_banner.png"]
			}
		}
	}
</script>

<style>
	.qk_index_body{
	    padding:0 0rpx 160rpx;
		min-height: 100vh;
		position: relative;
		background-color: #fff;
	}
	.qk_index_hd{
		position: relative;
		padding:140rpx 0 36rpx;
	}
	.qk_index_banner_bg{
		position: absolute;
		top:0;
	    width:100%;
		height:800rpx;
		z-index: 0;
	}
	.qk_index_hd_title{
		position: relative;
		padding-left: 50rpx;
	    font-size: 44rpx;
	    color:#fff;
	}
	.qk_index_solgen{
		position: relative;
		line-height: 50rpx;
		padding-left: 50rpx;
		font-size: 24rpx;
		color:#fff;
	}
	.qk_index_searchBar{
		display: flex;
		width: 80%;
		position: relative;
		background-color: #fff;
		margin:50rpx auto 30rpx;
		height:80rpx;
		line-height:80rpx;
		border-radius: 40rpx;
	}
	.qk_index_city{
		font-size: 28rpx;
		padding: 0 30rpx;
		width:150rpx;
		height:80rpx;
		line-height:80rpx;
		position: relative;
	}
	.qk_index_city:before{
		content: "";
		display: block;
		position: absolute;
		height:52rpx;
		width: 1rpx;
		background-color: #eaeaea;
		top:0;
		bottom:0;
		right:0;
		margin:auto;
	}
	.qk_index_city:after{
		content: "";
		display: block;
		position: absolute;
		border:7rpx solid transparent;
		border-top-color:#999;
		height:0;
		width: 0;
		top:0;
		bottom:0;
		right:10rpx;
		margin:auto;
	}
	.qk_index_currcity{}
	.qk_index_searchInputBox{
		flex:1;
		position: relative;
	}
	.qk_index_searchInputBox .uni-icons{
		position: absolute;
		top:0;
		left: 10rpx;
	}
	.qk_index_searchInputBox input{
		height:80rpx;
		line-height:80rpx;
		padding: 0 40rpx;
		font-size: 26rpx;
	}
	
	.qk_index_banner_box{
		position: relative;
		border-radius: 50rpx;
		background-color: #fff;
	}
	.qk_index_banner{
	    height:390rpx;
	    width:690rpx;
		padding: 30rpx;
	}
	.qk_index_banner_item{
	    height:calc(100% - 50rpx);
		width: 100%;
	}
	.qk_index_banner_item image{
	    width: 100%;
	    height:100%;
	}
	
	
	
	.qk_index_buildHd{
		font-weight: bold;
		font-size: 40rpx;
		padding: 0 30rpx;
		color:#323232;
	}
	.qk_index_builditem{
	    padding:30rpx 30rpx;
	    border-bottom:1px solid #EFEFEF;
	}
	.qk_index_builditem+.qk_index_builditem{
	}
	.qk_index_builditem_title{
	    font-size: 34rpx;
	    font-weight: bold;
	    line-height: 60rpx;
	}
	.qk_index_builditem_title image{
		margin-left:20rpx;
	    margin-bottom: -6rpx;
	    height:34rpx;
	    width:60rpx;
	}
	.qk_index_builditem_title_city{
	    float: right;
	    color:#999;
	    font-size: 24rpx;
	    font-weight: normal;
	}
	.qk_index_builditem_title_city text{
	    margin-right:10rpx;
	}
	.qk_index_builditem_address{
		margin-top:20rpx;
	    line-height: 40rpx;
	    font-size: 30rpx;
	    color:#666;
	}
	.qk_index_builditem_mainimg{
	    width: 100%;
	    height:359rpx;
	    margin-top:12rpx;
	}
	.qk_index_builditem_price{
	    color: #666;
	    line-height: 80rpx;
	    font-size: 28rpx;
	    
	}
	.qk_index_builditem_price .qk_index_num{
	    font-size: 42rpx;
	    color:#F58243;
	    padding: 0 10rpx;
	    vertical-align: top;
	}
	.qk_index_builditem_price .qk_index_pow{
	    
	}
	.qk_index_builditem_tips{
	    padding: 15rpx 0;
	}
	.qk_index_builditem_tips:after{
		content: "";
		display: block;
		clear: both;
	}
	.qk_index_builditem_tips text{
	    float: left;
	    height:48rpx;
	    line-height: 48rpx;
	    padding: 0 20rpx;
	    color: #999;
	    font-size: 24rpx;
	    background-color: #F5F5F5;
	    border-radius: 10rpx;
	}
	.qk_index_builditem_tips text+text{
	    margin-left: 10rpx;
	}
	.qk_index_footer{
		position: absolute;
		bottom:30rpx;
		left:0;
		right:0;
		text-align: center;
		height: 140rpx;
		padding: 44rpx 0;
		width: 100%;
	}
	.qk_index_footer image{
		height:100%;
	}
</style>
